package com.neptune.imapp.ui.compose.screen.mainPage.page

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Badge
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.PagerState
import com.neptune.imapp.R
import com.neptune.imapp.ui.compose.screen.mainPage.MainViewModel
import com.neptune.imapp.ui.theme.md_theme_Grey
import kotlinx.coroutines.launch

@OptIn(ExperimentalPagerApi::class)
@Composable
fun Information(mainViewModel: MainViewModel, pagerState: PagerState) {
    val list = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11")
    LazyColumn(content = {
        itemsIndexed(items = list) { index, item ->
            MsgBox(username = item, pagerState = pagerState, viewModel = mainViewModel)
        }
    }, modifier = Modifier.padding(bottom = 80.dp))
}

@OptIn(ExperimentalPagerApi::class)
@Composable
fun MsgBox(username: String, pagerState: PagerState, viewModel: MainViewModel) {
    val scope = rememberCoroutineScope()
    Column {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(3.dp)
                .clickable {
                    scope.launch {
                        viewModel.username.value = username
                        pagerState.scrollToPage(1)
                    }
                }) {
            Image(
                painter = painterResource(id = R.drawable.img_1),
                contentDescription = null,
                modifier = Modifier
                    .width(40.dp)
                    .height(40.dp)
                    .clip(RoundedCornerShape(50)),
                contentScale = ContentScale.Crop
            )
            Column(modifier = Modifier.weight(1.0f)) {
                Text(text = username, color = MaterialTheme.colorScheme.primary, fontSize = 18.sp)
                Text(
                    text = "你好啊按吧按吧按吧awdawdawdawdawdawdawdawdawdawdwad",
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1,
                    modifier = Modifier.fillMaxWidth(),
                    color = Color(0xE62B2B2B)
                )
            }
            Column {
                Text(text = "8:20", color = Color(0xB34E4E4E))
                Badge {
                    Text(text = "1")
                }
            }
        }
        Divider(color = md_theme_Grey)
    }
}
